<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--

    - 项目中你是怎么解决跨域
        cors 后端解决的
        webpack代理服务器转发请求 利用代理服务器绕过浏览器的安全策略(同源策略)
        先将请求转发给代理 再由代理去转发请求到目标服务器
        实现: vue.config.js中配置proxy 代理标识(负责某一部分的请求)+目标服务器地址

    - 项目中你是怎么区分请求环境的
        开发环境 生产环境  process.env.变量名
        你用过哪些环境变量: VUE_APP_BASE_API (.env.production  .env.development)
        内置的环境变量:     NODE_ENV

    - 响应拦截器中你是如何处理响应200操作失败的
        后端接口只要结束了 响应都是200  判断success(大事件后台管理 code)
          操作成功  返回剥离好的数据
          操作失败  返回一个失败的promise => 不走.then成功逻辑

    - 如果是复杂表单校验 你会不会自定义校验 怎么做的
        validator函数  rule value callback
        callback() 通过;  callback('...') 不通过

    - 你这个系统 用户信息在哪获取 为什么?
        我们公司这个系统进入时是需要获取用户信息的, 因为用户信息中含有权限相关的信息,
        它直接决定了将来进入系统时左侧菜单栏的展示(本质是用户的页面访问权), 所以在进入系统之前 我就需要知道这个用户能访问哪些页面

        将来在路由前置守卫中获取到了用户信息后 再next() 放行进入系统

    - 有没有处理过列表数据 转 树? 怎么做的?  (扩展)
        做过
        列表数据是没有层级关系的, 他们是并排排列在数组中, 而他们之间的关系完全基于pid(parentId)
        我们可以遍历数组利用pid查找指定id的数据的子级数据 这个逻辑我们可以封装成一个函数(找子级数据)
        在查找某个数据的子级数据时 一旦找到某个子级数据 那么利用刚刚的函数查找子级数据的子级数据, 利用递归完成树形数据的处理

    - dialog编辑做过  行内编辑做过么? 怎么做的($set)
      - 临时添加一个isEdit字段
          会决定当前行数据的编辑或者正常展示状态  可以利用table-column的插槽配合isEdit去控制出现表单还是span

      - 临时添加一个temp临时数据
          他是绑定给编辑时出现的表单元素的 因为我们需要做的是确认才完成编辑 只要用户没有点击确认 那么输入的内容都是不生效的
          如果绑定的是真实数据 那么就是实时编辑的效果 就不是确认编辑的效果了

    - 联合查询做过么 怎么做的? 当时查询时有哪些条件呢?
          page 页码; pagesize 每页条数; keyword 关键字; departmentId 部门id;
          - 利用el-pagination组件绑定page以及pagesize 利用current-change事件完成页码切换时更新数据 利用size-change事件完成每页条数切换时更新数据
          - keyword双向绑定在el-input上 将来在input事件中完成更新数据(进行防抖优化) =>
          - 部门列表是展示在el-tree中, 将来通过node-click事件, 拿到选中的部门信息, 获取到了部门id 完成更新数据(当时遇到了一个问题) => 需要在树形组件加载完成后 默认选中一个部门节点($nextTick) =>

    - excel导入?
        - 打开一个对话框 => 下载模板文件(?)
        - 在点击上传按钮的时候 触发隔壁那个隐藏文件选择框的点击事件(隔山打牛) 打开文件资源管理器 选择文件 利用change事件获取到选中的文件
        - 请求后端接口(通过formData格式的数据 携带选中的文件) 完成批量的新增

    - excel导出?
      - 利用file-saver插件的saveAs方法 传递了blob文件流数据 给了文件名 实现了下载(下载文件)
      - 请求后端接口 获取excel的blob数据 调用saveAs完成下载
        - 封装请求函数需要提供responseType: blob/json
        - 项目中之前处理的响应拦截器 当时返回的是response.data.data => 需要判断如果是文件流数据  那么直接返回response.data

    - 上传头像
      - 利用el-upload组件 实现头像上传
        - action 上传地址 必选参数 => 为了手动上传给空
        - before-upload 校验上传的文件 函数内返回false停止上传; true继续上传
        - http-request 手动上传的逻辑卸载这里
      - 具体上传过程
        - 由于用的是腾讯云图片服务器 所以下载了腾讯的cos-js-sdk-v5这个包
        - 创建请求的实例 利用cos.putObject将图片传到服务器, 将来在第二个参数拿到后端响应的图片地址 存在组件中(数据在父组件中 v-model)

    - 系统权限控制的?
        - 核心思想:
          - 给员工分配角色, 给角色分配权限 => rbac
          - 将来根据后端返回用户信息中包含的页面权限字段roles.menus 过滤路由规则
            利用addRoutes添加用户专属的路由规则 从而让不同的用户拥有不同的页面权限
        - 具体实现:
          - 给员工分配角色, 给角色分配权限
          - 在路由前置守卫中 我们本身是需要获取到用户信息后放行进入系统, 在这里获取到用户信息后 通过filter过滤路由规则(path属性)
            通过router.addRoutes添加动态路由规则(这里会出现三个小问题 => 规则不会立即生效/404规则/权限不会随着用户退出登录重置, 默认累加)
          - 左侧菜单的渲染默认是按照静态路由规则渲染的 不合理 我们需要左侧菜单是基于静态+动态规则渲染 => 自己维护一个仓库数据routes(静态+动态)

    - 项目打包?
      - yarn build => 运维/后端/前端leader部署项目到服务器
      - 优化
        - cdn加速(利用外链减小项目体积-cdn能实现更近的访问区间更快的访问速度)
        - 路由懒加载(仅展示路由匹配的页面-提升首屏加载速度)
        - ...
      - 打包会遇到的问题
        - 如果路由模式切换了history 那么需要服务器端解决刷新404问题
        - 打包上线也会遇到跨域问题(cors-服务器端代理)
   -->
</body>
</html>
